<template>
	<view class="content">
		<!-- <image class="logo" src="@/static/logo.png"></image> -->
		<view class="charts-box">
			<text class="text-area title">金额汇总</text>
			<qiun-data-charts type="column" :chartData="chartData" :opts="opts"/>
		</view>
		<view class="charts-box">
			<text class="text-area title">商品总数</text>
			<qiun-data-charts type="pie" :chartData="pieData" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		getIndexDashboard
	} from "@/api/summary.js";

	const chartData = ref({});
	const pieData = ref({series: []});
	
	const opts = ref({
		yAxis: {showTitle: true, splitNumber: 5, padding: 10, data: [{position: 'left', title: "单位:万元"}]}
	});

	onMounted(() => {
		getServerData()
	});

	function getServerData() {
		// 模拟从服务器获取数据时的延时
		// setTimeout(() => {
		// 	let res = {
		// 		categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
		// 		series: [{
		// 				name: '目标值',
		// 				data: [35, 36, 31, 33, 13, 34],
		// 			},
		// 			{
		// 				name: '完成量',
		// 				data: [18, 27, 21, 24, 6, 28],
		// 			},
		// 			{
		// 				name: '完成量123',
		// 				data: [18, 27, 21, 24, 6, 28],
		// 			},
		// 		],
		// 	};
		// 	chartData.value = JSON.parse(JSON.stringify(res));
		// }, 500);
		indexData()
	}

	async function indexData() {
		getIndexDashboard().then(res => {
			chartData.value = res.data
			pieData.value.series = res.data.pipSeries
		})
	};
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 150rpx;
		width: 150rpx;
		margin-top: 150rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.charts-box {
		margin-top: 50rpx;
		width: 100%;
		height: 300px;
	}
</style>